Esta nota es la conclusión de la sección de menú para cambiar el fondo de tu página con JavaScript. Esto como parte de nuestro curso de JavaScript. Ahora continuamos hablando de este tema.
Crea una variable para representar el objeto seleccionado. El truco document.getElementById() funciona aquí al igual que para los campos de texto. Ahora extrae la propiedad de valor del objeto seleccionado, el cual refleja el valor de la opción seleccionada actualmente. Entonces, si el usuario ha elegido Amarillo, el valor de selColor es "#FFFF00". Claro que cada sección indica el color que mostrará? Por eso, puedes modificar de acuerdo a tu gusto este código. Pero no olvides usar los números hexadecimales correpondientes al color mencionado.
Para establecer el color de fondo del documento usa el mecanismo DOM para establecer el color de fondo del cuerpo al valor elegido. Ahora te incluimos el código final.
<html>
<head>
<script type = "text/javascript">
// from dropdownList.html
function changeColor(){
var selColor = document.getElementById("selColor");
var color = selColor.value;
document.body.style.backgroundColor = color;
} // end function
</script>
</head>
<body>
<form action = ">
<h1>Please select a color</h1>
<fieldset>
<select id = "selColor">
<option value = "#FFFFFF">White</option>
<option value = "#FF0000">Red</option>
<option value = "#FFCC00">Orange</option>
<option value = "#FFFF00">Yellow</option>
<option value = "#00FF00">Green</option>
<option value = "#0000FF">Blue</option>
<option value = "#663366">Indigo</option>
<option value = "#FF00FF">Violet</option>
</select>
<input type = "button"
value = "change color"
onclick = "changeColor()" />
</fieldset>
</form>
</body>
</html>
Ahora que tienes la base para formar menús desplegable con javascript que modifican fondo de pantalla puedes cambiar la apariencia de tu sitio. Eso contribuirá a darle una vista diferente. Espera siguientes notas para ampliar tu comprensión del tema. También puedes hacerlo dinámico si decides construirlo usando PHP. Por eso te recomendamos que veas nuestro curso de PHP y también te puede ayudar nuestro curso de Kotlin.
